<template>
 <view class="fixtipo">
	 <view :style="{height:getstateheight()+'px'}"> </view>
	 <view class="tittop" :style="{height:gettitileheight()+'px'}"> 
	       <view style="width:50rpx;" class="iconfont icon-shezhi" @click="gosz"></view>
	       <view class="">我的</view>
	       <view style="width:50rpx;" class=""></view>
	 </view>
 </view>
<view class="conbox">
	<view class="tou">
		  <view class="bj"></view>
		  <view class="card" @click="goslef">
			   <view class="l">
				   <image v-if="useuserstore.userlogin.img.includes('http')" :src="useuserstore.userlogin.img" mode="aspectFill"></image>
				   <image v-else :src="ip+'/'+useuserstore.userlogin.img" mode="aspectFill"></image>
				   <view class="userinfo">
					     <view class="userinfo-t">{{useuserstore.userlogin.name}}</view>
					     <view class="userinfo-b">ID:{{useuserstore.userlogin.id}}</view>
				   </view>
			   </view>
			   <view class="iconfont icon-fanhui"></view>
		  </view>
	</view>
	<view class="sier">
		 <view class="" v-if="rudatasum">
		 	<view class="item" @click="gopage('sc')">
		 				    <view class="itop">{{rudatasum.lovesum}}</view>
		 				    <view class="ibu">我的收藏</view>
		 	</view>
		 	<view class="item" @click="gopage('hose')">
		 				    <view class="itop">{{rudatasum.hosesum}}</view>
		 				    <view class="ibu">我的房源</view>
		 	</view>
		 	<view class="item" @click="gopage('his')">
		 				    <view class="itop">{{rudatasum.looksum}}</view>
		 				    <view class="ibu">浏览历史</view>
		 	</view>
		 </view>
	</view>
	<view class="list">
		 <view class="">
			  <view class="item" @click="gomyhose"> <view class="l"> <view class="iconfont icon-kezhangongyu"></view> 我的房源</view>  <view class="iconfont  icon-fanhui"></view> </view>
			  <view class="item"> <view class="l"> <view class="iconfont icon-kefu"></view> 联系客服</view>  <view class="iconfont  icon-fanhui"></view> </view>
			  <view class="item"> <view class="l"> <view class="iconfont icon-fankui"></view> 意见反馈</view>  <view class="iconfont  icon-fanhui"></view> </view>
		 </view>
		 <button class="kf" open-type="contact">111</button>
		 <button class="fk" open-type="feedback">实时反馈</button>
	</view>
</view>
 
</template>

<script setup>
	import {ref} from 'vue'
	import { ip } from '@/utils/getinfo.js';
	import {onShow} from '@dcloudio/uni-app'
	import {getstateheight,gettitileheight} from '@/utils/getinfo.js'
	import userstore from '@/store/userlogin.js'
	import {useruserallsum} from '@/api/index.js'
	const useuserstore=userstore()
	const rudatasum=ref()
	const heightbox=getstateheight()+gettitileheight()+'px'
	onShow(()=>{
		getsum()
	})
	const gosz=()=>{
		   uni.navigateTo({
		   	url:"/pages/sz/sz"
		   })
	}
	const getsum=async()=>{
		const rudata=await useruserallsum()
		rudatasum.value=rudata.rudata
	}
	const goslef=()=>{
		uni.navigateTo({
			url:"/pages/slef/slef"
		})
	}
	const gomyhose=()=>{
		uni.navigateTo({
			url:"/pages/myhose/myhose"
		})
	}
	const gopage = e=>{
		if(e=='sc'){
			uni.navigateTo({
				url:"/pages/sc/sc"
			})
			return
		}
		if(e=='his'){
			 uni.navigateTo({
			 	url:"/pages/lookhis/lookhis"
			 })
			 return
		}
		uni.navigateTo({
			url:"/pages/myhose/myhose"
		})
	}
</script>

<style lang="scss" scoped>
	.fixtipo{
		background-color: #f58e24;
	}
	.tittop{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		color: #fff;
	}
	.tou{
		height: 300rpx;
		background-color: #f7f7f7;
		position: relative;
		.bj{
			position: absolute;
			top: 0;
			height: 50%;
			background-color: #f58e24;
			width: 100%;
			clip-path: ellipse(51% 90% at 50% 3%);
		}
		.card{
			height: 80%;
			width: 90%;
			background-color: #fff;
			position: absolute;
			left: 50%;
			top: 10%;
			transform: translate(-50%);
			z-index: 2;
			border-radius: 20rpx;
			box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10rpx;
			.l{
				display: flex;
				align-items: center;
				image{
					height: 120rpx;
					width: 120rpx;
					border-radius: 50%;
					margin: 0 20rpx;
					box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
				}
				.userinfo{
					display: flex;
					flex-direction: column;
					justify-content: center;
					gap: 20rpx;
					.userinfo-t{
						width: 400rpx;
						 font-size: 30rpx;
						 overflow: hidden;
						 white-space: nowrap;
						 text-overflow: ellipsis;
					}
					.userinfo-b{
						font-size: 20rpx;
						color:#7b7b7b;
					}
				}
			}
		    .iconfont{
				transform: rotate(-180deg);
				font-size: 25rpx;
			}
		}
	}
    .conbox{
		height: calc(100vh - v-bind(heightbox));
		width: 100%;
		background-color: #f7f7f7;
		.sier{
			height: 230rpx;
			display: flex;
			justify-content: center;
			>view{
				height: 80%;
				width: 90%;
				background-color: #fff;
				border-radius: 20rpx;
				box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
				display: flex;
				justify-content: space-around;
				.item{
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					gap: 30rpx;
					.itop{
						text-align: center;
						font-size: 36rpx;
						font-weight: 700;
					}
					.ibu{
						font-size: 25rpx;
					}
				}
			}
		}
	    .list{
			height:270rpx;
			display: flex;
			justify-content: center;
			position: relative;
			.kf{
				width: 90%;
				height: 90rpx;
				position: absolute;
				top: 90rpx;
				left: 50%;
				transform: translate(-50%);
				opacity: 0;
			}
			.fk{
				width: 90%;
				height: 90rpx;
				position: absolute;
				top: 180rpx;
				left: 50%;
				transform: translate(-50%);
				opacity: 0;
			}
			>view{
				height:100%;
				width: 90%;
				border-radius: 20rpx;
				background-color: #fff;
				box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
				.item{
					height: 90rpx;
					border-bottom: 1rpx solid #eee;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 20rpx;
					.iconfont{
						margin: 0 20rpx 0 10rpx;
						font-size: 30rpx;
					}
					.icon-fanhui{
						font-size: 25rpx;
						transform: rotate(180deg);
					}
					.l{
						display: flex;
						align-items: center;
						font-size: 25rpx;

					}
				}
			}
		}
	}
  </style>
  
